import React, { useEffect, useState } from 'react';
import { useSpring, animated } from '@react-spring/web';
import ContractComStyle from './contract.module.css';
import { ReactComponent as ItemOneIcon } from '../../../../../../assets/icon/home/合同金额.svg';
import { useNavigate } from 'react-router-dom';
import { Button } from 'antd';

// 自定义格式化函数，不显示货币符号
const formatCurrency = (value) => {
  return new Intl.NumberFormat('de-DE', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);
};

const CurrencyScroller = ({ endAmount }) => {
  const [amount, setAmount] = useState(0);

  useEffect(() => {
    setAmount(endAmount);
  }, [endAmount]);

  const props = useSpring({
    from: { amount: 0 },
    to: { amount: amount },
    config: { duration: 2000 },
  });

  return (
    <animated.span className={ContractComStyle.currency}>
      {props.amount.to((n) => formatCurrency(n))}
    </animated.span>
  );
};

function ContractComponent() {
  const navigate = useNavigate();

  return (
    <div className={ContractComStyle.amount_app_item}>
      <div className={ContractComStyle.amount_app_item_left}>
        <p>
          <span>
            <CurrencyScroller endAmount={125.57} />
          </span>
          <span>-12.32%</span>
        </p>
        <Button
          style={{ width: '80%', margin: '10px 0' }}
          onClick={() => {
            navigate('/admin/contract/');
            sessionStorage.setItem('pathKey', '4-1');
          }}
        >
          合同金额
        </Button>
      </div>
      <div className={ContractComStyle.amount_app_item_right}>
        <ItemOneIcon width={70} />
      </div>
    </div>
  );
}

export default ContractComponent;
